<template>
  <div class="home-container mb60">
    <!-- <van-nav-bar fixed title="商城首页"></van-nav-bar> -->
    <van-sticky :offset-top="0">
      <van-search
        @click="search"
        shape="round"
        class="searchBar"
        placeholder="请输入要搜索的商品名称"
      />
      <!-- logo -->

      <div class="logo-box">
        <img src="@/assets/imgs/shop-logo.png" class="logo" />
        <div>
          <h3>沃尔玛</h3>
          <div class="tips">
            <span>月销量:1万+</span>
            <span>起送&yen;0</span>
            <span>基础运费:&yen;5</span>
          </div>
        </div>
      </div>
    </van-sticky>

    <div class="content">
      <!-- 分类导航 -->
      <div class="left">
        <div class="sidebar">
          <van-sidebar @change="cateChange" v-model="activeCateIndex">
            <van-sidebar-item
              v-for="item in cateList"
              :key="'cate-' + item.id"
              :title="item.catename"
            />
          </van-sidebar>
        </div>
      </div>
      <!-- 商品列表 -->

      <div class="right">
        <div class="goodsList">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-card
                v-for="item in goodsList"
                :key="item.id"
                :price="item.price"
                :title="item.goodsname"
              >
                <template #thumb>
                  <img
                    @click="goGoods(item.id)"
                    v-lazy="$baseUrl + item.img"
                    style="width: 80px"
                  />
                </template>
                <template #footer>
                  <van-icon
                    @click="cartAdd(item.id)"
                    name="add"
                    style="font-size: 30px; color: #0091ff"
                  />
                </template>
              </van-card>
            </van-list>
          </van-pull-refresh>

          <van-empty description="暂无商品数据" v-if="goodsList.length === 0" />
        </div>
      </div>
    </div>

    <!-- 购物车模态框 -->
    <transition name="van-slide-up">
      <CartModal ref="modal" v-model="visible" />
    </transition>
  </div>
</template>

<script setup>
import CartModal from "@/components/CartModal";
// import { mapActions } from "pinia";
import useCartStore from "@/store/cartStore";
import { inject, onMounted, ref, watch } from "vue";
import {usePager} from '@/plugins/hooks';
import { useRouter } from "vue-router";
  // 调用自定义hooks函数
  const { page, size, totalCount, finished, loading, isLoading } = usePager();
const cartStore = useCartStore();
const { cartAddAction } = cartStore;
const visible = ref(false);
// 当前激活的分类id
const cateId = ref(1);
const activeCateIndex = ref(0);
const goodsList = ref([]);
const cateList = ref([]);
const axios = inject("axios");
const router = useRouter();
// 显示购物车数据
const showCart = () => {
  visible.value = true;
};
// 下拉刷新
const onRefresh = () => {
  // 开启下拉刷新loading
  isLoading.value = true;
  // 重新请求数据
  getGoodsList();
};
const cartAdd = (goodsid) => {
  cartAddAction({ goodsid, num: 1 });
  // 显示模态框
  showCart();
};
const cateChange = (index) => {
  // 开启loading加载效果
  loading.value = true;
  // 当前激活的分类id
  cateId.value = cateList.value[index].id;
  // 重置页码
  page.value = 1;
  // 请求分类商品数据
  getGoodsList();
  // 切换分类之后, 数据是否加载完毕, 必须设置为false
  finished.value = false;
};
const onLoad = () => {
  // 更新页码
  if (goodsList.value.length < totalCount.value) {
    // 更新页码
    page.value += 1;
    // 请求下一页数据
    getGoodsList();
  }
};

// 请求商品分类
const goodsCateList = () => {
  axios.get("/getcate").then((res) => {
    if (res.code === 200) {
      cateList.value = res.list;
      // 请求索引为0的分类对应的商品数据
      getGoodsList();
    }
  });
};

const goGoods = (id) => {
  router.push({ name: "goods", query: { id } });
};
const search = () => {
  router.push({ name: "search" });
};
// 请求商品列表数据
const getGoodsList = () => {
  // 根据分类id请求商品数据
  axios.get("/getgoodslist", { params: { cateid:cateId.value, page:page.value, size:size.value } }).then((res) => {
    if (res.code === 200) {
      const { goodsData = [], total = 0 } = res.list;
      // 更新商品列表数据
      goodsList.value = [...goodsList.value, ...goodsData];
      // 更新商品总数
      totalCount.value = total;
      setTimeout(() => {
        // 关闭上拉加载更多loading效果
        loading.value = false;
        // 关闭下拉刷新loading效果
        isLoading.value = false;
      }, 1000);
      // 数据加载完毕
      if (goodsList.value.length === total.value) {
        finished.value = true;
      }
    }
  });
};
// 分类变换
watch(activeCateIndex, () => {
  // 清空goodsList
  goodsList.value = [];
});
onMounted(()=>{
    goodsCateList()
});
</script>

<style scoped lang="scss">
.home-container {
  .logo-box {
    height: 90px;
    padding-left: 20px;
    display: flex;
    background-color: #fff;

    .tips {
      color: #666;
      font-size: 14px;

      span {
        margin-right: 10px;
      }
    }

    .logo {
      width: 80px;
      height: 80px;
      margin-right: 20px;
    }
  }

  //
  .content {
    height: calc(100vh - 100px);
    display: flex;

    .left {
      width: 100px;
      height: 100%;
      overflow: auto;
    }

    .right {
      flex: 1;
      height: 100%;
      overflow: auto;
    }
  }
}
</style>